import React from 'react';
import {Card,Modal, Buton, Select, message,Form,Button,Table,DatePicker, Radio} from 'antd';
import axios from 'axios';
import Utils from './../../utils/utils'; 
import BaseForm from '../../components/BaseForm/index';
import ETable from '../../components/ETable';

const FormItem = Form.Item
const Option = Select.Option
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
export default class One extends React.Component{
    state = {
        list:[],
        orderInfo:{},
        orderConfirmVisible:false
    }
    //结束订单
    handleFinish = () => {
        let item = this.state.selectedItem
      
        if(!item) {
            Modal.info({
                title:"信息",
                content:"请选择一个数据"
            })
            return
        }
        axios.get("https://www.studyinghome.com/mock/5e4ca5d80167590746b7615d/example/order/bike")
        .then((res) => {
         
            if(res.data.code == 0) {
                this.setState({
                    orderConfirmVisible:true,
                    orderInfo:res.data.result
                })
               
            }
        })
    }
    handleFinishOrder =() => {
       
        message.success("订单结束")
        this.setState({
            orderConfirmVisible:false
        })
    }
    //详情
    openOrderDetail = () =>{
        let item = this.state.selectedItem
        console.log(item)
        if(!item) {
            Modal.info({
                title:"信息",
                content:"请选择一个数据"
            })
            return
        }
         window.open(`/#/common/order/detail/${item.mobile}`,'_blank')
    }
    onRowClick = (record, index) => {
        // console.log(record)
        let selectKey=[index];
        this.setState({
            selectedRowKeys:selectKey,
            selectedItem: record
        })
    }
    componentWillMount() {
        axios.get("https://www.studyinghome.com/mock/5e4ca5d80167590746b7615d/example/table/order").then((res) => {
            let list = res.data.result.list
            this.setState({
                list
            })
        })
    }
    render() {
        const columns = [ 
            {
                title:'订单编号',
                dataIndex:'order_sn'
            },
            {
                title: '车辆编号',
                dataIndex: 'bike_sn'
            },
            {
                title: '用户名',
                dataIndex: 'user_name'
            },
            {
                title: '手机号',
                dataIndex: 'mobile'
            },
            {
                title: '里程',
                dataIndex: 'distance',
                // render(distance){
                //     return distance/1000 + 'Km';
                // }
            },
            {
                title: '行驶时长',
                dataIndex: 'total_time'
            },
            {
                title: '状态',
                dataIndex: 'status'
            },
            {
                title: '开始时间',
                dataIndex: 'start_time'
            },
            {
                title: '结束时间',
                dataIndex: 'end_time'
            },
            {
                title: '订单金额',
                dataIndex: 'total_fee'
            },
            {
                title: '实付金额',
                dataIndex: 'user_pay'
            }
        ]
        const formItemLaout = {
            labelCol:{span:5},
            wrapperCol:{span:10}
        }
        const selectedRowKeys = this.state.selectedRowKeys
        const rowSelection = {
            type:"radio",
            selectedRowKeys
        }
        return(
            <div>
                <Card title="订单管理" className="card-wrap">
                   <FilterFrom />
                </Card>
                <Card className="card-wrap">
                <Button type="primary" onClick={this.openOrderDetail} style={{margin:"0 20px"}}>订单详情</Button>
                <Button type="primary" onClick={this.handleFinish} style={{margin:"0 20px"}}>结束订单</Button>
                </Card>
                <Table
                    bordered
                    columns={columns}
                    dataSource={this.state.list}
                    rowSelection={rowSelection}
                    onRow={(record, index) => {
                        return{
                            onClick:()=> {
                                this.onRowClick(record,index);
                            }
                        }
                    }}
                >

                </Table>
                <Modal
                    title="订单结束"
                    visible={this.state.orderConfirmVisible}
                    width={600}
                    onCancel={() => {
                        this.setState({
                            orderConfirmVisible:false
                        })
                    }}
                    onOk={this.handleFinishOrder}
                >
                    <Form layout="horizontal">
                        <FormItem label="车辆编号" {...formItemLaout}>
                          {this.state.orderInfo.id}
                        </FormItem>
                        <FormItem label="剩余电量" {...formItemLaout}>
                           {this.state.orderInfo.battery + "%"}
                        </FormItem>
                        <FormItem label="行程开始时间" {...formItemLaout}>
                            {this.state.orderInfo.start_time}
                        </FormItem>
                        <FormItem label="当前位置" {...formItemLaout}>
                            {this.state.orderInfo.start_time}
                        </FormItem>
                    </Form>
                </Modal>
            </div>
        )
    }
}
class FilterFrom extends React.Component{
    render() {
        const { getFieldDecorator} = this.props.form;
        return(
            <div>
                <Form layout="inline">
                    <FormItem label="请选择城市" >
                        {
                            getFieldDecorator('city_id',{
                                initialValue:'1'
                            })(
                                <Select placeholder="全部" style={{width:100}}>
                                    <Option value="1">全部</Option>
                                    <Option value="2">北京市</Option>
                                    <Option value="3">天津市</Option>
                                 </Select>
                            )
                        }
                    </FormItem>
                    <FormItem>
                        <RangePicker  />
                      
                    </FormItem>

                    <FormItem label="订单状态" >
                        {
                            getFieldDecorator('city_id',{
                                initialValue:'1'
                            })(
                                <Select placeholder="全部" style={{width:100}}>
                                    <Option value="1">全部</Option>
                                    <Option value="2">已授权</Option>
                                    <Option value="3">未授权</Option>
                                 </Select>
                            )
                        }
                    </FormItem>
                    <FormItem >
                        <Button type="primary" style={{margin:"0 20px"}}>查询</Button>
                        <Button>重置</Button>
                    </FormItem>
                </Form>
            </div>
        )
    }
}
FilterFrom = Form.create({})(FilterFrom)
